<template>
  <el-row
    ><el-select v-model="currentTableId" placeholder="请选择表" @change="tableChange()">
      <el-option
        v-for="item in selectTable"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-plus" plain @click="addRow()"
      >添加行</el-button
    >
    <el-button type="primary" icon="el-icon-edit" plain @click="save()">保存</el-button>
    <el-button type="primary" icon="el-icon-edit" plain @click="generateCode()"
      >生成后端代码</el-button
    >
    <el-button type="primary" icon="el-icon-edit" plain @click="TestMessage()"
      >消息测试</el-button
    >
  </el-row>
  <el-form
    :inline="true"
    label-position="left"
    :model="formInline"
    class="demo-form-inline"
  >
    <el-form-item label="表名">
      <el-input v-model="formInline.TableName" placeholder="表名"></el-input>
    </el-form-item>
    <el-form-item label="表注释">
      <el-input v-model="formInline.TableDescription" placeholder="表注释"></el-input>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column label="列名" width="200">
      <template #default="scope">
        <el-input v-if="scope.$index == editId" v-model="scope.row.columnName"></el-input>
        <span v-else>{{ scope.row.columnName }}</span>
      </template>
    </el-table-column>
    <el-table-column label="注释" width="250">
      <template #default="scope">
        <el-input
          v-if="scope.$index == editId"
          v-model="scope.row.columnDescription"
        ></el-input>
        <span v-else>{{ scope.row.columnDescription }}</span>
      </template>
    </el-table-column>
    <el-table-column label="列类型" width="180">
      <template #default="scope">
        <el-select
          v-if="scope.$index == editId"
          v-model="scope.row.columnType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span v-else>{{ scope.row.columnType }}</span>
      </template>
    </el-table-column>
    <el-table-column label="长度" width="90">
      <template #default="scope">
        <el-input v-if="scope.$index == editId" v-model="scope.row.maxLength"></el-input>
        <span v-else>{{ scope.row.maxLength }}</span>
      </template>
    </el-table-column>
    <el-table-column label="小数" width="90">
      <template #default="scope">
        <el-input v-if="scope.$index == editId" v-model="scope.row.minLength"></el-input>
        <span v-else>{{ scope.row.minLength }}</span>
      </template>
    </el-table-column>
    <el-table-column label="主键" width="50">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.isKey"
          :disabled="scope.$index != editId"
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="可空" width="50">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.isNull"
          :disabled="scope.$index != editId"
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="360">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
        <el-button size="mini" type="danger" @click="upLayer(scope.$index, scope.row)"
          >上移</el-button
        >
        <el-button size="mini" type="danger" @click="downLayer(scope.$index, scope.row)"
          >下移</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      formInline: {
        TableName: "",
        TableDescription: "",
      },
      selectTable: [],
      currentTableId: "",
      editData: [], //编辑行初始数据
      editId: -1, //判断编辑的是哪一行
      options: [
        {
          value: "uniqueidentifier",
          label: "uniqueidentifier",
        },
        {
          value: "nvarchar",
          label: "nvarchar",
        },
        {
          value: "varchar",
          label: "varchar",
        },
        {
          value: "int",
          label: "int",
        },
        {
          value: "decimal",
          label: "decimal",
        },
        {
          value: "datetime",
          label: "datetime",
        },
        {
          value: "ntext",
          label: "ntext",
        },
        {
          value: "bit",
          label: "bit",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let that = this;
      axios
        .get("https://localhost:44328/api/Code/GetList")
        .then(function (response) {
          that.selectTable = response.data.data;
          that.selectTable.unshift({ value: "", label: "请选择表" });
          //that.currentTableId = response.data.data[0].value;
          //that.tableChange();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    tableChange() {
      let that = this;
      if (that.currentTableId == "") {
        that.tableData = [];
        return;
      }
      axios
        .get("https://localhost:44328/api/Code/Find", {
          params: { id: that.currentTableId },
        })
        .then(function (response) {
          let row = response.data.data;
          that.formInline.TableName = row.tableName;
          that.formInline.TableDescription = row.tableDescription;
          that.tableData = row.columns;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //上移图层数据
    upLayer: function (index, row) {
      if (index == 0) {
        this.$message({
          message: "处于顶端，不能继续上移",
          type: "warning",
        });
      } else {
        this.tableData[index] = this.tableData[index - 1];
        this.tableData[index - 1] = row;
      }
    },
    //上移图层数据
    downLayer: function (index, row) {
      if (index == this.tableData.length - 1) {
        this.$message({
          message: "处于底部，不能继续下移",
          type: "warning",
        });
      } else {
        this.tableData[index] = this.tableData[index + 1];
        this.tableData[index + 1] = row;
      }
    },
    addRow() {
      this.editId = this.tableData.length;
      let row = {
        columnName: "",
        columnDescription: "",
        columnType: "",
        maxLength: 0,
        minLength: 0,
        isKey: false,
        isNull: true,
      };
      this.tableData.push(row);
    },
    handleEdit(index, row) {
      //console.log(index, row);
      this.editId = index;
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
      console.log(index, row);
    },
    save() {
      axios
        .post("https://localhost:44328/api/Code/Save", {
          Id: this.currentTableId,
          TableName: this.formInline.TableName,
          TableDescription: this.formInline.TableDescription,
          Columns: this.tableData,
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    generateCode() {
      axios
        .post("https://localhost:44328/api/Code/GenerateCode", {
          Id: this.currentTableId,
          TableName: this.formInline.TableName,
          TableDescription: this.formInline.TableDescription,
          Columns: this.tableData,
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    TestMessage() {
      ElMessage.success({
        dangerouslyUseHTMLString: true,
        message: "居中的文字",
        center: true,
        offset: 200,
      });
    },
  },
};
</script>
<style>
.el-table td {
    padding: 2px 0px;
}
</style>